<template>
  <div class="my common__color-F0F0F0">
    <x-header v-show="!isWeChar" :left-options="{showBack: false}">
      <div slot="default" class="common__header--title">我的</div>
      <!-- <div slot="right">{{saveInsure.hotArea.areaName}}</div> -->
    </x-header>

    <group>
      <cell v-if="user.isLogin" @click.native="changeHeadImg()">
        <span class="my__user--name" :title="userName" slot="after-title">{{userName | filter_uname}}</span>
        <div class="my__head" slot="icon">
          <img @click="refreshImg()" class="my__header--img" id="myHeadImg" :src="user.userDto.headUrl">
        </div>
        <div slot="inline-desc" class="my__user--type">
          <img class="my__user--typeimg" slot="icon" width="20" src="~assets/x3/ico/v.png">
          <span class="my__user--type">{{returnUserType(user.userDto.userType,user.userDto.registerType)}}</span>
        </div>
        <!-- <div class="my__list--rightfont" slot>更换头像</div> -->
      </cell>
      <cell v-else @click.native="checkLogin()" is-link>
        <span class="my__user--name" slot="after-title">{{userName}}</span>
        <div class="my__head" slot="icon">
          <img class="my__header--img" src="~assets/x3/header_login.png">
        </div>
      </cell>
    </group>

    <group>
      <cell @click.native="myLink" :link="RouteUrl.ORDER" is-link>
        <span class="my__list--title" slot="after-title">我的订单</span>
        <img slot="icon" width="20" style="display:block;margin-right:5px;" src="~assets/x3/ico/ico-list-order.png">
      </cell>
      <cell @click.native="myLink(RouteUrl.ABOUT)" :link="RouteUrl.ABOUT" is-link>
        <span class="my__list--title" slot="after-title">关于恒华</span>
        <img slot="icon" width="20" style="display:block;margin-right:5px;" src="~assets/x3/ico/ico-list-header.png">
      </cell>
      <!-- 智齿客服,为了加载不显示客服浮窗，class必须有zhiCustomBtn值 -->
      <cell @click.native="myLink('customer')">
        <span class="my__list--title" slot="after-title">我的客服</span>
        <img slot="icon" width="20" style="display:block;margin-right:5px;" src="~assets/x3/ico/icon-zxkf.png">
      </cell>
      <cell v-show="isWeChar && user.isLogin && typeof(this.user.userDto.wxOpenId) != 'undefined' && this.user.userDto.wxOpenId != null &&  user.userDto.wxSubscribe !='1'" :link="RequestUrl.WE_CHAT_FOLLOW_PUBLIC_NUMBER" is-link>
        <span class="my__list--title" slot="after-title">关注微信公众号</span>
        <img slot="icon" width="20" style="display:block;margin-right:5px;" src="~assets/x3/ico/wechat.png">
      </cell>
    </group>

    <group v-show="user.isLogin && isOpenShop">
      <cell @click.native="isGoOpenShop()" is-link>
        <span class="my__list--title" slot="after-title">{{shopText}}</span>
        <img slot="icon" width="20" style="display:block;margin-right:5px;" src="~assets/x3/ico/icon_shop_orange.png">
      </cell>
    </group>

    <group v-if="user.isLogin">
      <cell @click.native="myLink" :link="RouteUrl.MY_INTEGRAL" is-link>
        <span class="my__list--title" slot="after-title">我的宝豆</span>
        <img slot="icon" width="20" style="display:block;margin-right:5px;" src="~assets/x3/ico/beans.png">
      </cell>
      <cell @click.native="myLink" :link="RouteUrl.ACCOUNT" is-link>
        <span class="my__list--title" slot="after-title">账号设置</span>
        <img slot="icon" width="20" style="display:block;margin-right:5px;" src="~assets/x3/ico/setup.png">
      </cell>
      <cell @click.native="loginOut" is-link>
        <span class="my__list--title" slot="after-title">退出登录</span>
        <img slot="icon" width="20" style="display:block;margin-right:5px;" src="~assets/x3/ico/loginout.png">
      </cell>
    </group>

    <!-- 上传头像 dialog组件 -->
    <!-- <div v-transfer-dom>
      <head-portrait v-bind:isShowHeadPortrait="isShowHeadPortrait" v-if="isShowHeadPortrait" @closeDialog="closeHeadPortrait"></head-portrait>
    </div> -->
  </div>
</template>

<script>
import WeChatOauth from "src/js/weChat/weChatOauth"; //引入微信授权js
// import HeadPortrait from "src/components/my/HeadPortrait";
import { PopState, FooterIndex, Mutations, RouteUrl, FooterShow, StrLenth, USER_TYPE, WE_CHAT } from "src/common/const";
import { XHeader, Group, Cell, CellBox, Badge, XInput, XDialog, XButton, XSwitch, TransferDomDirective as TransferDom } from "vux";
import { mapState, mapActions } from "vuex";
import { RequestUrl } from "src/common/url";
import Validation from "src/common/util/validation";
import onlineCustomerService from "src/js/onlineCustomerService";//引入在线客服js
export default {
  directives: {
    TransferDom
  },
  components: { XInput, XHeader, Group, Cell, CellBox, Badge, XDialog, XButton, XSwitch },
  computed: mapState(["region", "user", "initUrl", "saveInsure", "isWeChar", "isWeAuth", "shareUuid"]),
  data() {
    return {
      RouteUrl: {},
      RequestUrl: {},
      userName: "未登录",
      isShowHeadPortrait: false, //上传组件默认不显示
      shopText: "我要开店",
      isOpenShop: false,//是否已开店
    };
  },
  filters: {
    filter_uname(val) {
      if (typeof (val) != 'undefined' && val != null && val.length > StrLenth.userNameMax) {
        return val.substring(0, StrLenth.userNameMax) + "...";
      }
      return val;
    },
  },
  methods: {
    //根据数据返回账户类型
    returnUserType(userType, registerType) {
      let type = "未定义";
      if (typeof (userType) != 'undefined' && userType != null) {
        //1游客,2普通客户,3专业代理,4商户,5销售人员
        type = USER_TYPE[parseInt(userType)];
      }
      //渠道用户
      if (this.$common.isNotEmpty(registerType) && (registerType == "1" || registerType == "2")) {
        type = "渠道" + type;
      }
      return type;
    },
    refreshImg() {
      let _this = this;
      if (_this.isWeChar) {
        _this.$vux.confirm.show({
          content: _this.$common.alertMsg("确认刷新头像？", "green;"), //显示内容
          showInput: false, //是否显示input
          confirmText: "确定",
          cancelText: "取消",
          onCancel() { ; },
          onConfirm() {
            //退出登录，以便重新读取数据
            _this.loginOut();
            //微信授权
            WeChatOauth.weChatOauth(_this, false, WE_CHAT.OAUTH_TYPE_DEFAULT);
          }
        });
      }
    },
    isGoOpenShop() {
      let _this = this;
      //校验-手机号-11位数字即可
      if (Validation.isErrPhone11(_this.user.userDto.mobile)) {
        //手机号无效则先绑定手机
        _this.$vux.confirm.show({
          content: _this.$common.alertMsg("请先绑定有效手机号码", "red;"), //显示内容
          showInput: false, //是否显示input
          confirmText: "确定",
          cancelText: "取消",
          onCancel() { ; },
          onConfirm() { _this.$common.goUrl(_this, RouteUrl.MGT_MOBILE); }
        });
        return;
      }
      //证件类型：1身份证，2社会信用代码
      if (!Validation.isRealName(_this.user.userDto.userName, _this.user.userDto.idNumber, _this.user.userDto.idType)) {
        _this.$vux.confirm.show({
          content: _this.$common.alertMsg("请先实名认证<br>并确保是中文姓名", "red;"), //显示内容
          showInput: false, //是否显示input
          confirmText: "确定",
          cancelText: "取消",
          onCancel() { ; },
          onConfirm() { _this.$common.goUrl(_this, RouteUrl.MGT_IDNUMBER); }
        });
        return;
      }
      if (this.user.userDto.storeFlag === "1") {
        this.$common.goUrl(this, RouteUrl.SHOP_MANAGE);
      } else {
        this.$common.goUrl(this, RouteUrl.SET_SHOP);
      }
    },
    //点击头像检查是否登录
    checkLogin() {
      if (!this.user.isLogin) {
        this.$common.goUrl(this, RouteUrl.LOGIN);
      } else {
        //刷新用户中心
        this.$common.goUrl(this, RouteUrl.MY);
      }
    },
    myLink(type) {
      if (type == "customer") {
        // onlineCustomerService.onlineClickOfMobile(this, '4008882008');
        //触发在线客服的click事件，IOS系统需要调用2次才能触发到click
        if (localStorage["BOTYPE"] == "I") {
          $(".zhiCustomBtn").trigger("click");
          $(".zhiCustomBtn").trigger("click");
        } else {
          $(".zhiCustomBtn").trigger("click");
        }
        return;
      }
      if (type != RouteUrl.ABOUT && !this.user.isLogin) {
        this.$common.goUrl(this, RouteUrl.LOGIN);//需要登录
        return;
      }
      this.$store.commit(Mutations.POP_STATE, PopState.VUX_POP_IN);
    },
    /**
         * 退出登录
         */
    loginOut() {
      sessionStorage["ID_CAR"] = "";
      this.$common.storeCommit(this, Mutations.SET_SHARE_UUID, this.$common.getUuid());
      this.$common.storeCommit(this, Mutations.REMOVE_USER_INFO);

      //判断是否有抽奖信息
      this.$common.storeCommit(this, Mutations.IS_SHOW_RED, this);

      this.userName = "未登录";
    },
    //更换头像
    changeHeadImg() {
      // if (this.user.isLogin && !this.$common.isEmpty(this.user.userDto)) {
      //   //更改显示上传组件属性
      //   this.isShowHeadPortrait = true;
      //   return;
      // }
      // console.log("头像上传时登录超时");
    },
    closeHeadPortrait() {
      this.isShowHeadPortrait = false;
    },
    /**
     * 页面信息初始化
     */
    initPage() {
      if (this.user.isLogin) {
        if (Validation.isEmpty(this.user.userDto.userName)) {
          this.userName = this.user.userDto.nickName;
        } else {
          this.userName = this.user.userDto.userName;
        }
      }
    }
  },
  beforeDestroy() {
    this.$common.storeCommit(this, Mutations.IS_SHOW_ROUTE_RED, false);
  },
  mounted() {
    this.$common.storeCommit(this, Mutations.IS_SHOW_ROUTE_RED, true);

    document.title = "恒华出行宝";
    if (this.user.isLogin && this.user.userDto.storeFlag === "1") {
      this.shopText = "我的店铺";
      this.isOpenShop = true;//已开店
    } else {
      this.shopText = "我要开店";
    }
    this.RouteUrl = RouteUrl; //路由变量
    this.RequestUrl = RequestUrl; //请求地址
    this.$init.indexInit(this, FooterIndex.MY);
    //初始化页面数据
    this.initPage();

    let data = { product: "", user: "" };
    if (this.user.isLogin) {
      data.user = this.user.userDto;
    }
    //远程加载在线客服js
    onlineCustomerService.initJsFile(this, data);
  }
};
</script>


<style lang="scss">
.my {
  width: 100%;
}

//头像父级的DIV
.my__head {
  width: 64px;
  height: 64px;
}

.my__header--img {
  width: 64px;
  height: 64px;
  border-radius: 100%;
}

// .weui-cells {
//     margin-top: 10px !important;
// }
.my__user--name {
  font-size: 15px;
  margin-left: 4px;
  padding-left: 5px;
}

.my__user--type {
  height: 21px;
  line-height: 21px;
  font-size: 12px;
  color: #7f7f7f;
}

.my__user--typeimg {
  float: left;
  margin-top: 3px;
  margin-left: 8px;
  margin-right: 5px;
  width: 15px;
  height: 15px;
}

.my__list--title {
  font-size: 15px;
  padding-left: 5px;
}

.my__list--right {
  font-size: 12px;
}

.my__list--rightfont {
  font-size: 15px;
  color: #7f7f7f;
}
</style>







